<template>
	<view class="main">
		<view class="header">
			<u-search height="56" bg-color="#F5F6F7" :show-action="false" placeholder="输入关键字进行搜索" v-model="keyword"
				@search="search"></u-search>
		</view>
		<view class="history">
			<view class="top">
				<text>历史搜索</text>
				<u-icon @click="show=true" input-align="center" name="trash" size="34"></u-icon>
			</view>
			<view class="cont">
				<block v-for="(item,index) in historys" :key="index">
					<view class="item" @click="historyClick(item)">{{item}}</view>
				</block>
			</view>
		</view>
		<view class="content conts-list">
			<block>
				<view class="conts-item" v-for="(item, index) in contsList" :key="index"
					@click="toPage('/Content/Detail', item.id)">
					<image :src="item.picture" mode="fill" class="images"></image>
					<view class="my-item">
						<view class="name" style="margin-bottom: 0rpx">{{item.name}}</view>
						<!-- <view class="contents level my-conts" v-html="item.introduction"> </view> -->
						<view class="contents address" style="margin-top: 0rpx;">
							{{ item.address }}
						</view>
						<view class="contents address">
							距您{{getAdd(item) && parseFloat(getAdd(item)).toFixed(2) }}km
						</view>
						<view class="money-box">
							<view class="money"><span class="my">¥ {{ (item.price && parseFloat(item.price  / 100).toFixed(2)) || '--' }}</span> 起</view>
							<view class="rate" style="margin-top: -4rpx">
								<span v-if="!item.score">暂无评分</span>
								<u-rate active-color="#FFD100" size="32" :current="item.score * 0.5" :disabled="true" v-else>
								</u-rate>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="content conts-list" v-else>
			<block v-for="item in list" :key="item.id">
				<view class=" conts-item item" @click="ToPage('Videodetails',item)">
					<image src="" mode="" class="images"></image>
					<view class="my-item">
						<view class="name">{{item.name}}</view>
						<view class="detail">{{item.detail}}</view>
						<view class="loa">{{ item.loa }}</view>
						<view class="money">{{ item.money }} 起</view>
						<view class="rate">
							<u-rate active-color="#FFD100" size="32" :current="item.star * 0.5" :disabled="true">
							</u-rate>
						</view>
					</view>
				</view>
			</block>
		</view> -->
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-modal show-cancel-button v-model="show" content="确定清空搜索记录？" @confirm="DelHistory"></u-modal>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				address: '',
				show: false,
				keyword: '',
				historys: [],
				type: 1,
				region: '', //大区
				pageNum: 1, //当前页码
				pageSize: 10, //每页数量
				total: 0, //数据总量
				contsList: [],
				list: [], //电影列表
				count: 5, //评分星星数量
				status: 'loadmore', // this.status = 'nomore'  设置底部加载更多显示
				myAdds: {}
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.region) {
				this.region = e.region
			}
			if (e.type) {
				this.type = e.type
			}
			if (e.address) {
				this.address = e.address
			}
			this.getAddress();
			this.getList()
		},
		onShow() {
			const _this = this
			uni.getStorage({
				key: 'historys',
				success: function(res) {
					_this.historys = res.data
					console.log(res.data);
				},
				fail: function(err) {
					console.log(err)

				}
			});
			
			
		},
		onPullDownRefresh() {
			this.list = []
			this.pageNum = 1
			this.getList()
		},
		onReachBottom() {
			if (Math.ceil(this.total / this.pageSize) > this.pageNum) {
				this.pageNum = this.pageNum + 1
				this.getList()
			} else {

			}
		},
		methods: {
			// 获取距离
			 getAdd(item) {
				if(!(item.position.split(',')[1] == 0)) {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
				} else {
					return this.calculateDistance(item.position.split(',')[1], item.position.split(',')[0],  this.myAdds.result.location.lat, this.myAdds.result.location.lng )
					let add = item.address;
					return '--'
				}
			},
			calculateDistance(lat1, lon1, lat2, lon2) {
			    const R = 6371; // 地球半径，单位：千米  
			    const dLat = this.deg2rad(lat2-lat1);  // deg2rad below  
			    const dLon = this.deg2rad(lon2-lon1);   
			    const a =   
			        Math.sin(dLat/2) * Math.sin(dLat/2) +  
			        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *   
			        Math.sin(dLon/2) * Math.sin(dLon/2);   
			    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));   
			    const d = R * c; // 距离，单位：千米  
			    return d;  
			},
			deg2rad(deg) {  
			    return deg * (Math.PI/180)  
			},
			// 获取定位
			getAddress() {
				console.log('获取地址信息')
				// http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=json&pois=1
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {;
						res.location = res.latitude + ',' + res.longitude
						// let ak = '6f5443ecb71639a8c135d88dacd5241b';
						let ak = '';
						// ak = 'GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos';
						var url = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=6f5443ecb71639a8c135d88dacd5241b&output=json&coordtype=wgs84ll&location=${res.location}`;
						_this.$http({
							url: url,
							method: 'GET',
							hideLoading: true,
							data: {},
							success: res => {
								if(res.status == 0) {
									_this.myAdds = res;
									_this.address = res.result.addressComponent.city
								}
								// let data = res;
								// console.log('地址信息', res, 'wgs84')
							},
							fail: err => { },
							complete: e => {
								this.status = 'nomore'
							}
						})
					},
					fail: function(res) {
						console.log('失败', res)
					}
				});
			},
			// 获取景区信息
			getData() {
				// console.log('获取景区列表')
				this.status = 'loading';
				this.$http({
					url: this.$myApi.scenicList,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						res.rows.map(item => {
							if((item.position.split(',')[1] == 0)) {
							
								let add = item.address;
								// let ak = '6f5443ecb71639a8c135d88dacd5241b';
								let ak = '';
								var url = `https://api.map.baidu.com/geocoding/v3/?address=${add}&output=json&ak=${ak}`;
								let adds = '';
								this.$http({
									url: url,
									method: 'GET',
									hideLoading: true,
									data: {},
									success: res => {
										
										let data = res;
										if(res.status == 0) {
											item.position = + data.result.location.lng + ','  + data.result.location.lat 
										} else {
											
										}
									
									},
									fail: err => {
										// console.log(err);
									},
									complete: e => {
										
									}
								})	
							}
						})
						
						this.contsList = res.rows;
					},
					fail: err => {
						console.log(err, '失敗')

					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			toPage(e, id) {
				// console.log(id, '----------------');
				uni.navigateTo({
					url: `/pages/myHomeDetail/index?id=${id}`
				});
			},
			//页面跳转
			ToPage(url, item) {

				console.log('url---------', url)
				console.log('item---------', item)
				uni.navigateTo({
					url: `/pages/${url}/index?id=${item.id}&type=${this.type}&address=${this.address}`
				});
			},
			// 获取电影列表
			getList() {
				this.status = 'loading'
				this.status = 'loading';
				this.$http({
					// url: this.$myApi.scenicList,
					url: this.$myApi.scenicList + '?name=' + this.keyword,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						res.rows.map(i => {
							i.introduction = (i.introduction).replace(/\<img/gi,
								'<div style="display:none !important; width: 0px !important;max-width:0px !important" ')
						})
						// console.log(this.address)
						
						res.rows.sort((a, b) => {  
						    if (a.city === this.address && b.city !== this.address) {  
						        return -1; // a 应该排在 b 前面  
						    }  
						    if (a.city !== this.address && b.city === this.address) {  
						        return 1; // b 应该排在 a 前面  
						    }  
						    return 0; // 其他情况不改变顺序  
						});  
						this.contsList = res.rows;
						
					},
					fail: err => {
						console.log(err, '失敗')
					
					},
					complete:e=>{
						this.status = 'nomore'
					}
				})
			},
			// 删除搜索历史
			DelHistory() {
				const _this = this
				uni.removeStorage({
					key: 'historys',
					success: function(res) {
						console.log('清空成功');
						_this.historys = []
						_this.$refs.uToast.show({
							title: '清空成功',
							type: 'success'
						})
					},
					fail: function() {
						console.log('清空失败');
						_this.$refs.uToast.show({
							title: '清空失败',
							type: 'error'
						})
					}
				});
			},
			// 搜索
			search() {
				if (this.keyword) {
					let arr = this.historys.find(item => {
						return item == this.keyword
					})
					if (!arr) {
						this.historys.unshift(this.keyword)
						uni.setStorage({
							key: 'historys',
							data: this.historys,
							success: function() {
								// console.log('记录搜索历史成功');
							},
							fail: function(err) {
								console.log('记录搜索历史失败');
							}
						});
					}

					this.list = []
					this.pageNum = 1
					this.getList()
				} else {
					this.$refs.uTips.show({
						title: '搜索字段错误',
						type: 'error',
						duration: '2300'
					})
				}

			},
			// 点击搜索历史
			historyClick(e) {
				this.list = []
				this.pageNum = 1
				this.keyword = e
				console.log(e)
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		width: 690rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		background-color: #fff;
		padding-bottom: 30rpx;
		padding-top: 30rpx;

		.header {
			margin: 0rpx 28rpx 0 28rpx;

			height: 56rpx;
			border-radius: 28rpx;
			background: #F5F6F7;
			// padding: 0 150rpx;
		}

		.history {
			padding: 0 30rpx;

			.top {
				padding: 32rpx 0 26rpx 0;
				display: flex;
				justify-content: space-between;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;
				}
			}

			.cont {
				display: flex;
				flex-wrap: wrap;

				.item {
					padding: 12rpx 26rpx;
					background: #F5F6F7;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					margin: 0 16rpx 16rpx 0;
				}
			}
		}

		.content {

			// padding: 30rpx;
			.item {
				display: flex;
				justify-content: space-between;
				margin-top: 46rpx;

				.cover {
					width: 180rpx;
					height: 250rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}

					text {
						position: absolute;
						left: 10rpx;
						top: 12rpx;
						padding: 2rpx 10rpx;
						font-size: 16rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 22rpx;
						background: rgba(42, 41, 47, 0.9);
						border-radius: 4rpx;
					}
				}

				.cont {
					width: calc(100% - 204rpx);
					display: flex;

					.right {
						width: 140rpx;

						.title {

							font-size: 20rpx;
							font-weight: 400;
							color: #9F9EAC;
							line-height: 28rpx;
						}

						.btn {
							/deep/ button {
								width: 98rpx;
								height: 48rpx !important;
								border-radius: 24rrpx !important;
								background: #EF3C37;
								box-shadow: 0rpx 2rpx 6rpx 0rpx #F69C9A;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 32rpx;
								margin-top: 24rpx;
							}

							.pay {
								/deep/ button {
									background-color: transparent;
									color: #EF3C37;
								}
							}

						}
					}

					.left {
						width: calc(100% - 140rpx);

						.title {
							font-size: 28rpx;
							font-weight: 600;
							color: #000000;
							letter-spacing: 1rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.rate {
							margin-bottom: 16rpx;
							font-size: 24rpx;
							color: #676767;
							text {
								font-size: 20rpx;
								font-weight: 600;
								color: #FF9120;
								line-height: 28rpx;
							}
						}

						.des {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 20rpx;
							font-weight: 400;
							color: #44444F;
							line-height: 28rpx;
						}

						.tag {
							margin-top: 14rpx;

							/deep/ .u-tag {
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}

		.loadmore {
			margin: 30rpx auto;
		}
	}
</style>


<style lang="scss" scoped>
	.main {
		.conts-list {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 10rpx auto 30rpx;

			.conts-item {
				display: flex;
				flex-direction: row;
				// width: 637rpx;
				// height: 344rpx;
				border-bottom: 1rpx solid #707070;
				margin: 0 auto;
				padding: 36rpx 3rpx 36rpx 7rpx;

				&:last-child {
					border-bottom: 0rpx;
				}
				.contents {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #676767;
					margin-top: 10rpx;
					height: 32rpx;
					line-height: 32rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
				.address {
					-webkit-line-clamp: 1;
				}
				.level {
					// color: #FFD100;
				}
				.my-conts {
					
					height: 90rpx !important;
					line-height: 32rpx;
					position: relative;
					top: -8rpx;
					display: -webkit-box;  
					  -webkit-line-clamp: 3 !important; /* 控制显示行数 */  
					  -webkit-box-orient: vertical;  
					  overflow: hidden;  
					  text-overflow: ellipsis;  
					  word-wrap: break-word; /* 防止内容被强制折行 */  
					// 
				}

				.rate {
					float: right;
					font-size: 24rpx;
					color: #676767;
				}

				.my-item {
					width: 404rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.money-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 16rpx;
					}
					.money {
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						height: 30rpx;
						line-height: 30rpx;
						color: #676767;
						// margin-top: 24rpx;
						.my {
							font-size: 30rpx;
							margin-right: 8rpx;
						}
					}

					.loa {
						height: 30rpx;
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #676767;
					}

					.detail {
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #676767;
						line-height: 38px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-bottom: 8rpx;
						height: 76rpx;
					}

					.name {
						font-size: 26rpx;
						line-height: 46rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #1F1F1F;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-bottom: 12rpx;
					}
				}

				.images {
					width: 212rpx;
					height: 164rpx;
					border-radius: 10rpx;
					background-color: #eee;
					margin-right: 36rpx;
					margin-left: 16rpx;
				}
			}


		}
	}
</style>


<style>
	page {
		background-color: #f5f5f5;
	}
</style>